<template>
  <div class="departments-container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织架构" name="first" />
      </el-tabs>
      <div class="box">
        <!-- <el-row>
          <el-col :span="20"> 江苏传智播客教育科技股份有限公司</el-col>
          <el-col :span="4">
            <el-row class="right-box">
              <el-col :span="12">负责人</el-col>
              <el-col
                :span="12"
              ><el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>黄金糕</el-dropdown-item>
                  <el-dropdown-item>狮子头</el-dropdown-item>
                  <el-dropdown-item>螺蛳粉</el-dropdown-item>
                  <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                  <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown></el-col>
            </el-row></el-col>
        </el-row> -->
        <depart :depart="depart" @success="getDepartment" />
        <hr>
        <el-tree :data="list" :props="defaultProps" default-expand-all>
          <template v-slot="{ data }">
            <div class="tem">
              <!-- {{ data }} -->
              <!-- <el-row>
                <el-col :span="20"> {{ data.name }}</el-col>
                <el-col :span="4">
                  <el-row class="right-box">
                    <el-col :span="12" style="height: 26px">{{
                      data.manager
                    }}</el-col>
                    <el-col
                      :span="12"
                    ><el-dropdown>
                      <span class="el-dropdown-link">
                        操作<i class="el-icon-arrow-down el-icon--right" />
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>添加子部门</el-dropdown-item>
                        <el-dropdown-item>编辑部门</el-dropdown-item>
                        <el-dropdown-item>删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown></el-col>
                  </el-row>
                </el-col>
              </el-row> -->
              <depart :depart="data" :flag="true" @success="getDepartment" />
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getDepartmentsAPI } from '@/api/departments.js'
import arrayToTree from 'array-to-tree'
export default {
  name: '',
  data() {
    return {
      activeName: 'first',
      list: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      depart: {}
    }
  },
  computed: {},
  created() {
    this.getDepartment()
  },
  methods: {
    async getDepartment() {
      const res = await getDepartmentsAPI() // 获取组织架构数据
      console.log(res, 1)
      this.depart = {
        id: '',
        companyId: res.data.companyId,
        manager: res.data.companyManage || '负责人',
        name: res.data.companyName
      }
      this.list = arrayToTree(res.data.depts, {
        parentProperty: 'pid',
        customID: 'id'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.departments-container {
  padding: 20px;
  .el-card {
    padding: 40px;
    .box {
      padding: 40px 60px;
      .right-box {
        text-align: right;
      }
      .tem {
        flex: 1;
      }
    }
  }
}
</style>
